<template>
    <div class="tab_container flex-row-center">
        <div class="tabItem" v-for="(tabItem, index) in tabs" :key="index" :class="{active:activeValue==tabItem.value}" @click="tabItemClick(tabItem)">
            {{ tabItem.label }}
            <span v-if="isShowCount">({{ tabItem.count || 0 }})</span>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Tabs',
    props: {
        //默认选中的值
        activeValue: {
            type: [String, Number],
            require: true
        },
        //数据源
        tabs: {
            type: Array,
            default() {
                return []
            }
        },
        isShowCount: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },

    methods: {
        tabItemClick(item) {
            this.$emit('change', item.value);
        }
    },
    created() {
    },
    mounted() {

    },

}
</script>

<style lang="scss" scoped>
.tab_container {
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 16px 36px 6px;
    margin-bottom: 20px;

    .tabItem {
        display: inline-block;
        position: relative;
        color: #333333;
        font-size: 16px;
        font-weight: 500;
        margin-right: 64px;
        height: 32px;
        cursor:pointer;

        &.active {
            color: #1890FF;

            &::after {
                display: block;
                content: '';
                height: 2px;
                background: #1890FF;
                border-radius: 1px;
                margin-top: 10px;
            }

        }

    }
}
</style>
